<template>
	<view class="recycle">
		<view class="green"></view>
		<!-- 导航栏 -->
		<view class="top">
			<view class="top1">物品类别</view>
			<view class="top2">
				<li v-for="(item,index) in list" :key="index" @tap="listindex=index" :style="listindex===index? 'color: #16ca8a;':''"> {{item.value}}  <view class="icon" v-show="listindex===index"></view></li>
			</view>
		</view>
		<!-- inp输入框 -->
		<view class="inp">
			<view class="inp1">
				
				<view class="statistics">
					<image class="images" src="../../static/shop/矢量智能对象.png" mode="widthFix"></image>
				    <input type="number" placeholder='请输入手机号码' />
				</view>
				
				<view class="statistics" @tap="gorim">
					<image class="image" src="../../static/shop/矢量智能对象(1).png" mode="widthFix"></image>
				    <input type="text" placeholder='请选择附近回收站点' />
					<image class="sub" src="../../static/shop/矩形 9 拷贝.png" mode="widthFix"></image>
				</view>
				
				<view class="statistics">
					<image class="image" src="../../static/shop/矢量智能对象(2).png" mode="widthFix"></image>
				    <input type="text" placeholder='请输入详细地址' />
					<image class="sub" src="../../static/shop/矩形 9 拷贝.png" mode="widthFix"></image>
				</view>
				
				<view class="statistics">
					<image class="image" src="../../static/shop/矢量智能对象(3).png" mode="widthFix"></image>
				    <input type="text" placeholder='请描述物品类型,方便我们为您提供更好的服务' />
				</view>
				
				<view class="statistics">
					<image class="image" src="../../static/shop/图层 1 (2).png" mode="widthFix"></image>
				    <input type="number" placeholder='请输入预计重量(kg)' />
				</view>
				
				
				<view class="statistics">
					<image class="image" src="../../static/shop/矢量智能对象(4).png" mode="widthFix"></image>
				    <view class="select"></view>
				</view>
				
				<view class="bont">
					<image class="image" src="../../static/shop/拍照 (2).png" mode="widthFix"></image>
				    <view class="selects">上传照片（选填）</view>
				</view>
				<view class="phot">
					<view class="add" @tap="check(index)" v-for="(item,index) in photlist" :key="index">
						<image class="set" :src="item" mode=""></image>
					</view>
					<view class="add" @tap="phot()">
						<image class="get" src="../../static/shop/组 1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		 <!-- <view class="" style="width: 200rpx; height: 200rpx;">
		 	<AddressPicker @change="change" :level="3">{{planLocate}} </AddressPicker>
		 </view> -->
		<view class="but">
			提交预约
		</view>
	</view>
</template>

<script>
	// import AddressPicker from "@/components/lingdang-AddressPicker/AddressPicker.vue"
	export default {
		data() {
			return {
				// planLocate:'请选择地址',
				list:[
					{id:0,value:"废纸类"},
					{id:1,value:"旧家电"},
					{id:2,value:"衣物"},
					{id:3,value:"金属"},
					{id:4,value:"塑料"},
					{id:5,value:"其他"}
				],
			
				listindex:0,
				photlist:[],
				datetimerange: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"],
			};
		},
		// components:{
		// 	AddressPicker
		// },
		methods:{
			// change(index){
			// this.planLocate = index.data
			// },
			phot(){
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success:  (res)=> {
						console.log(JSON.stringify(res.tempFilePaths));
						this.photlist.push(...res.tempFilePaths)
						// console.log(this.photlist);
					}
				});

			},
			check(index){
				console.log(index);
			},
			gorim(){
				uni.navigateTo({
					url:"/pages/rim/rim"
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.but{
		height: 80rpx;
		width: 710rpx;
		background-color: #00c783;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 15rpx;
		margin-top: 150rpx;
		margin-bottom: 50rpx;
	}
	li{
		list-style-type: none;
	}
.recycle{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #f5f5f5;
    width: 100vw;
    min-height: 100vh;
    z-index: 0;
	.green{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 110rpx;
		background-color: #00c783;
		// border-radius: 0 0 30rpx 30rpx;
		z-index: -1;
	}
}
.top{
	display: flex;
	flex-direction: column;
	width: 710rpx;
	height: 180rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
	// box-sizing: border-box;
     border-radius: 15rpx;
}
.top1{
	// background-color: aqua;
	height: 90rpx;
	width: 100%;
	font-size: 34rpx;
	line-height: 90rpx;
	padding-left: 20rpx;
}
.top2{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90rpx;
	width: 100%;
	li{
		position: relative;
		flex: 1;
		// border: 1rpx solid #00c783;
		text-align: center;
		font-size: 27rpx;
		line-height: 90rpx;
		padding-bottom: 20rpx;
		// padding: 10rpx;
	}
	
}
.icon{
	position: absolute;
	bottom: 20rpx;
	left: 42rpx;
	height: 10rpx;
	width: 35rpx;
	background-color: #00c783;
	border-radius: 10rpx;
}
.inp{
	width: 710rpx;
	min-height: 780rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
	
}
.inp1{
	margin: 0 auto;
	width: 670rpx;
	min-height: 760rpx;
	margin-top: 20rpx;
	// background-color: aquamarine;
}
.statistics{
	display: flex;
	align-items: center;
	height: 82rpx;
	width: 100%;
	border-bottom:1rpx solid #f2f2f2 ;
	box-sizing: border-box;
    
    input{
		// background-color: #ffffff;
		width: 520rpx;
		height: 60rpx;
		border-radius: 10rpx 0 0 10rpx;
		margin-left: 30rpx;
		padding-left: 10rpx;
		line-height: 60rpx;
		font-size: 26rpx;
	}
}
.sub{
	width: 40rpx;
	height: 20rpx;
	padding-right: 30rpx;
	// padding-left: 40rpx;
}
.select{
	width: 520rpx;
	height: 60rpx;
	border-radius: 10rpx 0 0 10rpx;
	margin-left: 30rpx;
	padding-left: 10rpx;
	line-height: 60rpx;
	font-size: 26rpx;
}
.image{
	width: 40rpx;
	height: 40rpx;
	padding-left: 40rpx;
}
.images{
	width: 30rpx;
	height: 40rpx;
	padding-left: 40rpx;
}
.bont{
	display: flex;
	align-items: center;
	height: 82rpx;
	width: 100%;
	// border-bottom:1rpx solid #f2f2f2 ;
	box-sizing: border-box;
}
.selects{
	color: #999999;
	width: 520rpx;
	height: 60rpx;
	border-radius: 10rpx 0 0 10rpx;
	margin-left: 30rpx;
	padding-left: 10rpx;
	line-height: 60rpx;
	font-size: 26rpx;
}
.phot{
	display: flex;
	align-items: center;
	flex-flow:row wrap;
	min-height: 190rpx;
	width: 100%;
	.add{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
		width: 160rpx;
		height: 160rpx;
		background-color: #f5f5f5;
		margin-left: 20rpx;
		border-radius: 15rpx;
		.get{
			width: 50%;
			height: 50%;
		}
		.set{
			width: 100%;
			height: 100%;
		}
	}
}
</style>
